<template>
    <div class="van_top">
        <van-nav-bar @click="$router.push('/home/adress')" title="添加收货地址" left-arrow right-text="保存" />
    </div>
    <form>
        <input type="text" placeholder="收货人">
        <input type="phone" placeholder="手机号码">
        <input type="text" placeholder="所在地区">
        <input class="extr" type="text" placeholder="详细地址：如道路，门牌号，小区，楼栋号，单元室等">
    </form>
    <div class="hr"></div>
    <div class="foot">
        <span>设置为默认地址</span>
        <van-switch active-color="#4cd964" v-model="checked" />

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const checked = ref(true);
</script>

<style scoped>
.foot {
    color: gray;
    font-size: 0.9em;
    height: 30px;
    padding: 10px 20px;
    border-bottom: 1px solid gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.foot>span {
    display: block;
}

input {
    border: 0;
    display: block;
    height: 30px;
    font-size: 0.9em;
    width: 100%;
    padding: 10px 20px;
    border-bottom: 1px solid gray;
}

.extr {
    border-bottom: 0;
}

.hr {
    width: 100%;
    height: 8px;
    background-color: #eeeeee;
}

.van_top {
    --van-nav-bar-title-text-color: #000;
    /* 设置标题文本颜色为黑色 */
}

/* /deep/的意思大概为深入的 */

.van_top /deep/ .van-nav-bar__text {
    color: #000000;
}

.van-nav-bar__title {
    color: black;
}

.van_top /deep/ .van-icon-arrow-left {
    color: var(--nav-bar-icon-color, #000000) !important;
}


.van_top /deep/ .van-nav-bar {
    background-color: white;
}
</style>